<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">

    <!--  <%&#45;&#45;//live2d板娘&#45;&#45;%>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="https://fastly.jsdelivr.net/gh/lrplrplrp/bkyl2d@main/loads.js"></script>

    <style>
        .avatar-container {
            position: relative;
            width: 50px; /* 设置你需要的宽度 */
            height: 50px; /* 设置你需要的高度 */
            border-radius: 50%; /* 可选，如果你想要圆形的头像 */
            overflow: hidden; /* 确保超出容器的部分被隐藏 */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #201d1d; /* 设置背景色，可选 */
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片的纵横比 */
            display: block; /* 确保图片始终显示 */
        }

        .avatar-fallback {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none; /* 初始时隐藏文本 */
            color: #fff; /* 设置文本颜色 */
            background-color: rgba(99, 97, 97, 0.5); /* 设置背景色，覆盖在图片上 */
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 100px;
            text-align: center;
            font-size: 16px; /* 设置字体大小 */
        }

        .navbar-nav .nav-link.active {
            background-image: linear-gradient(to right, #434343 0%, #585656 100%);
            color: #f4eaea; /* 文本颜色通常为白色以与深色背景形成对比 */
        }
    </style>
</head>
<body style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-light sticky-top" id="mainNav"
     style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%)">
    <div class="container-fluid " id="nav">
        <a class="navbar-brand ms-5" th:href="@{#}">
            <img th:src="@{/images/a/logo.png}" alt="Logo" width="50" height="50"
                 class="d-inline-block  align-text-top">
            <span style="font-size: 15px;"></span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
                aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse ms-5 " id="navbarScroll">
            <ul class="nav nav-pills me-auto my-2 my-lg-0 navbar-nav-scroll col-4">
                <li class="nav-item">
                    <a class="nav-link c  text-dark " aria-current="page" th:href="@{#}" id="shouye">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link c t text-dark" aria-current="page" th:href="@{#}" data-id="1">学习</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link c t text-dark" aria-current="page" th:href="@{#}" data-id="2">生活</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link c t text-dark" aria-current="page" th:href="@{#}" data-id="3">讨论</a>
                </li>
                <li>
                    <a class="nav-link  text-dark" aria-current="page" th:href="@{/blog/intoCode}">
                        java在线
                    </a>
                </li>
            </ul>
            <ul class="nav nav-pills me-auto my-2 my-lg-0 navbar-nav-scroll col-4">
                <div class="row">
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                               name="searchText"
                               id="key">
                        <button class="btn btn-outline-success" type="button" id="searchForm"><i
                                class="iconfont icon-sousuo"></i></button>
                    </form>
                </div>
            </ul>
            <ul class="nav nav-pills me-auto my-2 my-lg-0 navbar-nav-scroll col-4">
                <li class="nav-item">
                    <div class="avatar-container" id="pic">
                        <img th:src="|@{/images/}${session.pic}|"
                             class="avatar d-inline-block align-text-top"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"/>
                        <div class="avatar-fallback ">点击</div>
                    </div>
                </li>
                <li class="nav-item">
                    <small sec:authorize="isAuthenticated()" class="nav-link  text-dark me-2 ms-2" aria-current="page"
                           sec:authentication="name">
                        Anonymous
                    </small>
                </li>

                <li class="nav-item" sec:authorize="isAnonymous()">
                    <a class="nav-link  text-dark me-2 ms-2 " aria-current="page"
                       th:href="@{/blog/intoLogin}">登录</a>
                </li>
                <li class="nav-item" sec:authorize="isAnonymous()">
                    <a class="nav-link  text-dark" aria-current="page" th:href="@{/blog/intoRegister}">注册</a>
                    </li>

                <li>
                    <a class="nav-link  text-dark me-2 ms-2" aria-current="page" th:href="@{/blog/editor1}">
                        <i class="iconfont icon-tianjia" style="font-size: 20px"></i>发布博客
                    </a>
                </li>

                <li>
                    <a class="nav-link  text-dark me-2 ms-2" aria-current="page"
                       sec:authorize="hasRole('ROLE_ADMIN')" th:href="@{/system/into}">
                        <i class="iconfont" style="font-size: 20px"></i>管理后台
                    </a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<!-- 简单导航 -->
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link " aria-current="page" th:href="@{#}">商务投递</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" th:href="@{#}">联系我们</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" th:href="@{#}">上传作品</a>
    </li>
    <li class="nav-item">
        <a class="nav-link ">投诉电话</a>
    </li>
</ul>

<div class="container-fluid justify-content-center"
     style=" width:100%; height: 320px;
   background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);text-align: center; color: #c553b2;font-family: 'Courier New', Courier, monospace;">
    <h1>WELCOME TO OUR BLOG</h1>
    <img th:src="@{/images/a/bac2.png}" alt="Logo"
         class=" d-inline-block align-text-top img-fluid" style="height: 240px;width: 500px">
</div>

<!-- 内容 -->
<div class="container border  mt-3 mb-3 "
     style="background: linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%), linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%), linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%); background-blend-mode: normal,color-burn;">
    <div class="row  mt-5 ">
        <div class="col-9">
            <div id="resultContainer" style="display: none;">
                <h3>每日推荐</h3>
            </div>
        </div>
        <div class="col-3">
            <h3>优秀博主</h3>
            <ul class="list-group">
            </ul>
        </div>
    </div>

</div>
</div>
</body>
</html>

<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        //记录随机背景图片的路径
        var imageCount = 11; // 图片数量
        var images = []; // 存储图片路径的数组
        for (var i = 1; i <= imageCount; i++) {
            images.push('/images/bac/b' + i + '.jpg'); // 构建图片路径数组
        }
        /**
         * 点击其他分类显示
         */
        $('.t').click(function () {

            $('.navbar-nav-scroll .nav-link').removeClass('active'); // 移除其他链接的active类
            $(this).addClass('active'); // 为当前点击的链接添加active类


            // 获取当前点击的按钮的data-id（如果需要的话）
            var buttonId = parseInt($(this).data('id'), 10);

            // 发起AJAX请求到后端Controller
            $.ajax({
                url: '/content/showClass', // 替换为你的Controller URL
                type: 'POST', // 或者使用 'GET'，取决于你的后端API
                data: {id: buttonId}, // 如果需要传递数据到后端，可以放在这里
                success: function (data) {
                    // 假设data是一个JSON数组，每个元素都是一个SearchResult对象
                    var html = '';
                    if (data && data.length > 0) {
                        console.log("进入");
                        $.each(data, function (index, result) {
                            var randomIndex = Math.floor(Math.random() * 10) + 1; // 生成随机索引
                            // 构建HTML字符串来显示结果
                            let date = new Date(result.createdate);

                            html += '<div class="card mb-3 border me-1" style="max-width: 1000px;' +
                                'background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);"> <div class="row g-0"> ' +
                                '<div class="col-3"> <img src="' + images[randomIndex] + '" class="img-fluid rounded-start" alt="..."> ' +
                                '</div> <div class="card-body col-9"> <h5 class="card-title row">' +
                                '<a href="/blog/showContent2?title=' + result.title + '&phone=' +
                                result.phone + '&sub=' + result.subtitle + '&time=' + date.toLocaleString() + '"> <strong>' +
                                result.title + '</strong></a></h5> <p class="card-text row"> ' + result.subtitle + '</p> ' +
                                '<p class="card-text row"> <small class="text-muted col-8">作者：<a href="/content/intoOther?phone='
                                + result.phone + '">' + result.username + '</a></small> <small class="text-muted col-8">' +
                                'tag：' + result.cname + ',' + result.mname + '</small> </p> </div> </div> </div>';
                        });
                        $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
                    } else {
                        console.log("空的");
                        html = "<p>没有查询相关博客</p>";
                        $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
                    }
                }, complete: function (xhr, status) {
                    //拦截器实现超时跳转到登录页面
                    // 通过xhr取得响应头
                    var REDIRECT = xhr.getResponseHeader("REDIRECT");
                    //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                    if (REDIRECT == "REDIRECT") {
                        alert("您还未登录，请登录后在操作");
                        var win = window;
                        while (win != win.top) {
                            win = win.top;
                        }
                        //重新跳转到 login.html
                        win.location.href = xhr.getResponseHeader("CONTEXTPATH");
                    }
                },
                error: function (error) {
                    // 处理请求错误
                    console.error("您还未登录页面，请登录后在操作");
                }
            });

            // 阻止按钮的默认行为（如果有的话）
            return false;
        });

        /**
         * 首页可以显示 用户
         */
        $.get("/system/showUser", function (data) {
            var html = '';
            if (data && data.length > 0) {
                console.log("进入");
                $.each(data, function (index, result) {
                    let date = new Date(result.createdate);
                    // 构建HTML字符串来显示结果
                    // ${pageContext.request.contextPath}/images/
                    html += '<li class="list-group-item list-group-item-secondary">' +
                        '<div class="row"> <img class="col-3 d-inline-block align-text-top" ' +
                        'src="/images/' + result.pic + '" alt="" />' +
                        '<small class="col-9">' +
                        '<div class="row text-dark"><a href="/content/intoOther?phone='
                        + result.phone + '">' + result.username + '</a></div>' +
                        '<div class="row" href=""><i class="iconfont icon-shoucang1 col-4"></i>' +
                        '<i class="iconfont icon-weibo-logo col-4"></i><i class="iconfont icon-douyin col-4"></i>' +
                        '</div></small></div></li>';
                });
                $('.list-group').html(html).show(); // 显示结果容器并填充数据
            } else {
                console.log("空的");
                html = '<p>无用户</p>';
                $('.list-group').html(html).show(); // 显示结果容器并填充数据
            }
        });

        /**
         * 实现首页能够显示页面
         *      1.得到首页表的title phone
         *      2.去text表中查询内容
         */

        $('#shouye').click(function () {
            $('.navbar-nav-scroll .nav-link').removeClass('active'); // 移除其他链接的active类
            // $(this).addClass('active'); // 为当前点击的链接添加active类
            location.reload(); // 刷新整个页面
        })

        $.get("/system/showPutText", function (data) {
            $('.navbar-nav-scroll .nav-link').removeClass('active'); // 移除其他链接的active类
            $(this).addClass('active'); // 为当前点击的链接添加active类

            var html = '';
            if (data && data.length > 0) {
                console.log("进入");
                $.each(data, function (index, result) {
                    var randomIndex = Math.floor(Math.random() * 10) + 1; // 生成随机索引
                    let date = new Date(result.createdate);
                    // 构建HTML字符串来显示结果
                    html += '<div class="card mb-3 border me-1" style="max-width: 1000px;' +
                        'background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);"> <div class="row g-0"> ' +
                        '<div class="col-3"> <img src="' + images[randomIndex] + '" class="img-fluid rounded-start" alt="..."> ' +
                        '</div> <div class="card-body col-9"> <h5 class="card-title row">' +
                        '<a href="/blog/showContent2?title=' + result.title + '&phone=' +
                        result.phone + '&sub=' + result.subtitle + '&time=' + date.toLocaleString() + '"> <strong>' +
                        result.title + '</strong></a></h5> <p class="card-text row"> ' + result.subtitle + '</p> ' +
                        '<p class="card-text row"> <small class="text-muted col-8">作者：<a href="/content/intoOther?phone='
                        + result.phone + '">' + result.username + '</a></small> <small class="text-muted col-4">' +
                        'tag：' + result.cname + ',' + result.mname + '</small> ' +
                        '<i class="iconfont icon-weibo-logo"></i><i class="iconfont icon-douyin"></i>' +
                        '</p> </div> </div> </div>';
                });
                $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
                $('.footer').removeAttr('d-none');
            } else {
                console.log("空的");
                html = '<p>无博客</p>';
                $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
            }
        });

        //能获得session中的号码 则让登录和注册按钮框 消失
        //点击头像 如果登录则跳转到个人主页
        $('#pic').click(function () {
            window.location.href = "/blog/showText";
        });

        /**
         * 搜索框
         *
         */
        $('#searchForm').click(function () {

            var searchText = $('#key').val(); // 获取搜索文本

            if (searchText !== null && searchText !== '') { // 如果搜索文本不为空
                $.ajax({
                    url: '/system/searchText', // 后端处理搜索请求的URL
                    type: 'GET',
                    data: {
                        search: searchText,
                        t: 1
                    }, // 发送的数据
                    dataType: 'json', // 告诉jQuery我们期望接收JSON数据
                    success: function (data) {
                        // 假设data是一个JSON数组，每个元素都是一个SearchResult对象
                        var html = '';
                        if (data.myList.length > 0) {
                            console.log("进入");
                            let list = data.myList;
                            $.each(list, function (index, result) {
                                var randomIndex = Math.floor(Math.random() * 10) + 1; // 生成随机索引
                                // 构建HTML字符串来显示结果
                                let date = new Date(result.createdate);
                                // 构建HTML字符串来显示结果
                                html += '<div class="card mb-3 border me-1" style="max-width: 1000px;' +
                                    'background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);"> <div class="row g-0"> ' +
                                    '<div class="col-3"> <img src="' + images[randomIndex] + '" class="img-fluid rounded-start" alt="..."> ' +
                                    '</div> <div class="card-body col-9"> <h5 class="card-title row">' +
                                    '<a href="/blog/showContent2?title=' + result.title + '&phone=' +
                                    result.phone + '&sub=' + result.subtitle + '&time=' + date.toLocaleString() + '"> <strong>' +
                                    result.title + '</strong></a></h5> <p class="card-text row"> ' + result.subtitle + '</p> ' +
                                    '<p class="card-text row"> <small class="text-muted col-8">作者：<a href="/content/intoOther?phone='
                                    + result.phone + '">' + result.userName + '</a></small> <small class="text-muted col-4">' +
                                    'tag：' + result.cname + ',' + result.mname + '</small> <i class="iconfont icon-weibo-logo"></i>' +
                                    '<i class="iconfont icon-douyin"></i></p> </div> </div> </div>';
                            });
                            $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
                        } else {
                            console.log("空的");
                            html = "<p>没有查询相关博客</p>";
                            $('#resultContainer').html(html).show(); // 显示结果容器并填充数据
                        }
                    },
                    complete: function (xhr, status) {
                        //拦截器实现超时跳转到登录页面
                        // 通过xhr取得响应头

                        var REDIRECT = xhr.getResponseHeader("REDIRECT");
                        //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                        if (REDIRECT == "REDIRECT") {
                            alert("您还未登录，请登录后在操作");
                            var win = window;
                            while (win != win.top) {
                                win = win.top;
                            }
                            //重新跳转到 login.html
                            win.location.href = xhr.getResponseHeader("CONTEXTPATH");
                        }
                    }
                });
            } else {
                // 如果搜索文本为空，可以选择清空或隐藏结果容器
                $('#resultContainer').hide().empty();
            }
        });

    });

</script>
